﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿FLASH的幻灯片</title>
<link rel="stylesheet" type="text/css" href="demo.css"/>
<link rel="stylesheet" type="text/css" href="../../../css/article_base.css" />
<script type="text/javascript" src="../../../js/move.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
 
<div id="playimg">
	<div id="bigimg">
		<ul>
			<li class="active"><img src="img/1.jpg"/></li>
			<li><img src="img/2.jpg"/></li>
			<li><img src="img/3.jpg"/></li>
			<li><img src="img/4.jpg"/></li>
			<li><img src="img/5.jpg"/></li>
			<li><img src="img/6.jpg"/></li>	
			<div id="mark_bottom"></div>
			<div id="text">我是图片1号</div>
			<div id="number">1/6</div>
			<a id="mark_left" href="#"></a>
			<a id="mark_right" href="#"></a>
			<div id="prev"></div>
			<div id="next"></div>
		</ul>
	</div>
	<div id="smallimg">
		<ul>
			<li class="active"><img src="img/1.jpg" alt="我是图片1号"/></li>
			<li><img src="img/2.jpg" alt="我是图片2号"/></li>
			<li><img src="img/3.jpg" alt="我是图片3号"/></li>
			<li><img src="img/4.jpg" alt="我是图片4号"/></li>
			<li><img src="img/5.jpg" alt="我是图片5号"/></li>
			<li><img src="img/6.jpg" alt="我是图片6号"/></li>	
		</ul>
	</div> 	
</div>

<p class="title">DEMO演示 仿FLASH的幻灯片</p>

<p class="title" style="padding-top:520px">js代码</p>
<pre>
//仿FLASH的幻灯片
window.onload = function(){
    var oMark1 = document.getElementById("mark_left");
    var oMark2 = document.getElementById("mark_right");
    var oPrev = document.getElementById("prev");
    var oNext = document.getElementById("next");
    var oSmallUl = document.getElementById("smallimg").getElementsByTagName("ul")[0];
    var aSmallLi = oSmallUl.getElementsByTagName("li");
    var iNow = 0;
    var iMinZindex = 2;
    var oBigUl = document.getElementById("bigimg").getElementsByTagName("ul")[0];
    var aBigLi = oBigUl.getElementsByTagName("li");
    var oTxt = document.getElementById("text");
    var oNumber = document.getElementById("number");
    var oPlayimg = document.getElementById("playimg");
    oSmallUl.style.width = aSmallLi[0].offsetWidth * aSmallLi.length + 'px';
    //调试的时候设置个大宽度的oSmallUl而且溢出不隐藏，最终程序让整个oSmallUl宽度等于aSmallLi宽度*i，
    //这样就能自适应oSmallUl宽度，然后再外层div溢出隐藏,总之不要用任何数字写死某个参数
    //这样即使添加到6张以上图片程序也不需要修改
    

    //左右按钮 移入移出淡入淡出
    oPrev.onmouseover = oMark1.onmouseover = function(){    
        bufferMove(oPrev,{"opacity":"1"});                  
    }    
    //因为oPrev之后需要点击行为 所以他的z-index层级必须在oMrak1层的上面 
    //如果不加oPrev.onmouseover只加oMark1的 那一旦移动到oPrev区域 就不算是oMark1的区域了 就不会让oPrev不透明了
    //IE7+ 这里必须先设定好oMark1的background css 然后oMark1.onmouseover才有效                                                
    oPrev.onmouseout = oMark1.onmouseout = function(){
        bufferMove(oPrev,{"opacity":"0"});
    }
    oNext.onmouseover = oMark2.onmouseover = function(){
        bufferMove(oNext,{"opacity":"1"});
    }
    oNext.onmouseout = oMark2.onmouseout = function(){
        bufferMove(oNext,{"opacity":"0"});
    }
    

    //1:开定时器 定时改变iNow 变化大图 
    function autoPlay(){      
        iNow++;
        if(iNow == aSmallLi.length){
            iNow = 0;
        }
        tab();
    }
    var Timer = setInterval(autoPlay, 3000);
    oPlayimg.onmouseover = function(){
        //一旦鼠标进入整个大div区域 就停止自动播放    
        clearInterval(Timer);          
    }
    oPlayimg.onmouseout = function(){ 
        //一旦鼠标离开整个大div区域 就继续自动播放    
        Timer = setInterval(autoPlay, 3000);
    }
    

    //2:点击按钮 改变iNow 变化大图
    oPrev.onclick = function(){ 
        //通过按钮点击改变iNow 类似于aSmallLi[i].onclick点击改变iNow    
        iNow--;                     
        if(iNow == -1){
            iNow = aSmallLi.length-1;
        }
        tab();
    }
    oNext.onclick = function(){
        iNow++;
        if(iNow == aSmallLi.length){
            iNow = 0;
        }
        tab();
    }
      

    //3:小图点击 通过被点击小图的this.index改变iNow 变化大图
    for(var i=0 ; i&ltaSmallLi.length ; i++){
        aSmallLi[i].index = i;                 
        //移入移出小图 透明不透明
        aSmallLi[i].onmouseover = function(){  
            bufferMove(this,{"opacity":"1"});
        } 
        aSmallLi[i].onmouseout = function(){
            if(this.index != iNow){ 
                //除了已经被点击的图片 其他图片移出的时候变透明 
                //由于一刷新进来iNow是初始值0 此时没有触发过点击事件（也就是没执行过iNow = this.index;）
                //所以是第0个li移出也不会变透明,不过第一个li本身就有class active所以本身一进来就是不透明的 所以没关系             
                bufferMove(this,{"opacity":"0.6"}); 
            }                                     
        }
        
        //点击小图 通过改变iNow变化相应的大图
        aSmallLi[i].onclick = function(){       
            if(this.index == iNow){ 
                //如果当前被点击的图片刚点击过一次了 那此次点击就什么都不做            
                return;                           
            }
            //点击小图 通过改变iNow变化相应的大图
            iNow = this.index;                    
            tab();
        }   
    }
    

    //4:上面的1 2 3通过改变iNowi然后执行这个tab() 从而变化大图
    function tab(){
        for(var i=0 ; i&ltaSmallLi.length ; i++){ 
            //点击事件一开始 所有图片全透明          
            bufferMove(aSmallLi[i],{"opacity":"0.4"});
        }
        //被点击的那个图片不透明
        bufferMove(aSmallLi[iNow],{"opacity":"1"});    
        
        //被点击的那张图片对应的大图显示 并且大图从高度0变成原本高度从而造成类似下拉效果
        //由于6张大图全部是定位叠在一起的 第一张z-index是2 其他是1 所以一刷新显示的是第一张 
        //将被点击的那张z-index进行iMinZindex++ 也就是被点击小图对应的大图那张z-index变成3，然后显示了。
        //由于css中包裹图片的aBigLi设置了overflow:hidden，图片显示以后马上让这张大图的高度为0，这张图片又消失
        //开始运动，让高度从0开始缓冲到oBigUl.offsetHeight，随着高度的增加，图片开始逐步显示，从而造成下拉刷新的效果
        aBigLi[iNow].style.zIndex = iMinZindex++;    
        aBigLi[iNow].style.height = 0;
        bufferMove(aBigLi[iNow],{"height":oBigUl.offsetHeight});
        
        //当第i个li被点击后（第i个小图），ul的left也要随之相应左移动i-1个li的距离 
        //小图分别是第0 1 2 3 4 5张，当第1 2 3 4张的时候左移动iNow-1个aSmallLi宽度的距离
        //第0张移动0，第5张移动的和他上一张一样多 所以再加上判断第0张及最后一张（也就是第(aSmallLi.length-1)张，不要写死，后续可能添加图片到不止6张）
        if(iNow == 0){
            bufferMove(oSmallUl,{"left":"0px"}); 
        }else if(iNow == aSmallLi.length-1){
            bufferMove(oSmallUl,{"left":-(iNow-2)*aSmallLi[0].offsetWidth}); 
        }else{
            bufferMove(oSmallUl,{"left":-(iNow-1)*aSmallLi[0].offsetWidth}); 
        }
        
        //改变左右文本
        oTxt.innerHTML =  aSmallLi[iNow].getElementsByTagName("img")[0].alt;      
        oNumber.innerHTML = (iNow+1) + "/" + aSmallLi.length;
    }

}


/* 缓冲运动
 * obj 运动对象
 * json 运动目标属性 如{"left":"800px","opacity":"0.5"} 
 * fn 回调函数
 */
function bufferMove(obj,json,fn){  
  var iCur = 0;
  var iTarget = 0;
  var iSpeed = 0;  
  var bStop = true;        
  clearInterval(obj.fMove);

  obj.fMove = setInterval(function(){
    bStop = true;                         //每次定时器一开始 就设置bStop为ture
    
    for(attr in json){                    //for in json 同时做n个属性的缓冲型数值变化
      if(attr == 'opacity'){   
        //对于opacity属性 传入0.x 然后放大100倍进行操作 后续赋值再除以100         
        iCur = parseInt(parseFloat(getStyle(obj,attr)) * 100);  
        iTarget = parseInt(parseFloat(json[attr]) * 100);    
      }else{
        iCur = parseInt(getStyle(obj,attr)); 
        iTarget = parseInt(json[attr]);                       
      }
      iSpeed = (iTarget - iCur)/8;                                 
      
      if(iSpeed > 0){
        iSpeed = Math.ceil(iSpeed);
      }
      if(iSpeed < 0){
        iSpeed = Math.floor(iSpeed);
      }
      
      //每个定时器周期里 for in 循环了n次 有n个同时进行的bufferMove函数 从而变化属性值 
      //n个bufferMove函数里只要有任意一个函数里的属性值还没到达终点 都会把bStop变为false  
      //当所有属性值都到达终点后 也就是n个bufferMove函数都不执行这句的时候  
      //这次定时器周期最后的bStop没有被变化为false 还是true   
      //当这次定时器周期的bStop还是ture的话 在定时器周期函数最后判断bStop为ture 那就关闭定时器了                      
      if(iTarget != iCur){   
        bStop = false;            
      }                             
                                            
      if(attr == 'opacity'){                                       
        obj.style[attr] = (iCur + iSpeed)/100 + '';            
        obj.style.filter = 'alpha(opacity:'+(iCur+iSpeed)+')';  
      }else{
        obj.style[attr] = iCur + iSpeed + 'px';                
      }   
    }
    
    if(bStop){                        //只要有任意一个还没到达终点 bStop会被变成false 不停止定时器
      clearInterval(obj.fMove);     //当所有属性值都到达终点后 bStop不会变false 还是原来的true 停止定时器         
      if(fn){                                                    
        fn();                                                  
      }
    }
  },20);
}
</pre>

<p class="title">html代码</p>
<pre>

&ltdiv id="playimg">
  &ltdiv id="bigimg">
    &ltul>
      &ltli class="active">&ltimg src="img/1.jpg"/>&lt/li>
      &ltli>&ltimg src="img/2.jpg"/>&lt/li>
      &ltli>&ltimg src="img/3.jpg"/>&lt/li>
      &ltli>&ltimg src="img/4.jpg"/>&lt/li>
      &ltli>&ltimg src="img/5.jpg"/>&lt/li>
      &ltli>&ltimg src="img/6.jpg"/>&lt/li> 
      &ltdiv id="mark_bottom">&lt/div>
      &ltdiv id="text">我是图片1号&lt/div>
      &ltdiv id="number">1/6&lt/div>
      &lta id="mark_left" href="#">&lt/a>
      &lta id="mark_right" href="#">&lt/a>
      &ltdiv id="prev">&lt/div>
      &ltdiv id="next">&lt/div>
    &lt/ul>
  &lt/div>
  &ltdiv id="smallimg">
    &ltul>
      &ltli class="active">&ltimg src="img/1.jpg" alt="我是图片1号"/>&lt/li>
      &ltli>&ltimg src="img/2.jpg" alt="我是图片2号"/>&lt/li>
      &ltli>&ltimg src="img/3.jpg" alt="我是图片3号"/>&lt/li>
      &ltli>&ltimg src="img/4.jpg" alt="我是图片4号"/>&lt/li>
      &ltli>&ltimg src="img/5.jpg" alt="我是图片5号"/>&lt/li>
      &ltli>&ltimg src="img/6.jpg" alt="我是图片6号"/>&lt/li>  
    &lt/ul>
  &lt/div>  
&lt/div>
</pre>

<p class="title">css代码</p>
<pre>

/*布局注意点：各定位元素的z-index层级*/
body,ul,li,div{
  margin:0px;
  padding:0px;
}
ul{
  list-style-type:none;
}
#playimg{
  width:400px;
  height:434px;              /*320+114*/
  position:absolute;
  left:400px;
  top:130px;
  border:1px solid #666;
  z-index:1;
}
#bigimg ul{
  width:400px;
  height:320px;
  z-index:1;
  position:relative;
}
#mark_bottom{
  width:400px;
  height:20px;
  background:black;
  position:absolute;
  left:0px;
  top:300px;
  z-index:3;
  opacity:0.5;
  filter:Alpha(opacity=50);
}
#text{
  width:200px;
  height:20px;
  line-height:20px;
  position:absolute;
  left:10px;
  top:300px;
  z-index:9997;
  font-size:12px;
  color:#fff;
}
#number{
  width:20px;
  height:20px;
  line-height:20px;
  position:absolute;
  left:370px;
  top:300px;
  /*层级仅次于按钮遮罩层 不能被大图覆盖*/
  z-index:9997;   
  font-size:12px;
  color:#fff;
}
#mark_left{
  width:200px;
  height:320px;
  position:absolute;
  left:0px;
  top:0px;
  z-index:9998;
  /* IE7+ 这里必须加上background属性后 oMark1.onmouseover才有效*/
  background:red;                 
  opacity:0;
  filter:Alpha(opacity=0);
}
#mark_right{
  width:200px;
  height:320px;
  position:absolute;
  left:200px;
  top:0px;
  /*#bigimg ul li的z-index要不断的增大以显现每个大图 所以遮罩层的层级不能低于他们 
  否则移除事件无效了 他层级只能仅次于按钮*/
  z-index:9998;
  /* IE7+ 这里必须加上background属性后 oMark1.onmouseover才有效*/
  background:red;                 
  opacity:0;
  filter:Alpha(opacity=0);
}
#prev{
  width:60px;
  height:60px;
  background:url(img/btn.gif);
  z-index:9999;
  /*#bigimg ul li的z-index要不断的增大以显现每个大图 所以按钮的层级要最高 不能被覆盖从而点不到*/
  position:absolute;
  left:10px;
  top:140px;
  opacity:0;
  filter:Alpha(opacity=0);
}
#next{
  width:60px;
  height:60px;
  background:url(img/btn.gif) no-repeat left bottom;
  z-index:9999;
  position:absolute;
  left:330px;
  top:140px;
  opacity:0;
  filter:Alpha(opacity=0);
}
#bigimg ul li{
  width:400px;
  height:320px;
  position:absolute;
  left:0px;
  top:0px;
  z-index:1;
  overflow:hidden;
}
#bigimg ul li.active{
  z-index:2;
}
#smallimg{
  width:400px;
  height:114px;
  background:#ccc;
  position:relative;    
  /*这里必须设置相对定位点然后overflow:hidden;才能有效隐藏ul溢出部分，
  如果不设置relative，那子级的ul就会一直往父级找relative
  一直都找不到就找到了最父级，那他就只相对最父级才会溢出隐藏了*/
  overflow:hidden;     
}
#smallimg ul{
  height:94px;
  margin-top:10px;
  position:absolute;
  left:0px;
}
#smallimg ul li{
  width:120px;
  height:94px;
  float:left;
  /*aSmallLi用padding-left出边框效果，这样移动一个aSmallLi就行了 以后设计到移动一个li的时候尽量padding不要margin*/
  padding-left:10px;         
  opacity:0.6; 
  filter:Alpha(opacity=60);              
  cursor:pointer;
}
#smallimg ul li.active{
  opacity:1;
  filter:Alpha(opacity=100);
}
#smallimg ul li img{
  width:120px;
  height:94px;
} 
</pre>


</body> 
</html>    
      
     
     
     